<template>
  <BaseDialog v-model="dialogVisible" :title="title" style="width: 650px" width="650px" :before-close="handleClose">
    <el-form ref="refDialogForm" class="set-dialog-form" :label-width="language === 'en' ? '180px' : '50px'"
      :model="formData" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('travelAgency.project')" prop="name">
            <TextInput v-model="formData.name" :label="$t('travelAgency.project')" :maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('travelAgency.type')" prop="type">
            <BaseSelect v-model="formData.type" :options="g_options.costItemTypeOptions"
              :label="$t('travelAgency.type')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('travelAgency.days')" prop="day">
            <TextInput v-model="formData.day" :label="$t('travelAgency.days')" :maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('travelAgency.location')" prop="address">
            <!-- <CascaderArea
              v-model="formData.address"
              style="width: 100%"
              :label="$t('travelAgency.location')"
              :level="2"
              @change="handleRegionChange"
            /> -->
            <TextInput v-model="formData.address" :label="$t('travelAgency.location')" :maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('hotel.unitPrice')" prop="price">
            <TextInput v-model="formData.price" :label="$t('hotel.unitPrice')" verify-type="all"
              @blur="handleInputBlur('price')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="count">
            <template #label>
              <label>{{ $t('travelAgency.quantity') }}</label>
            </template>
            <TextInput v-model="formData.count" :placeholder="$t('travelAgency.quantityPlaceholder')" verify-type="int"
              :maxlength="4" @blur="handleInputBlur('count')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('travelAgency.exchangeRate')" prop="exchangeRate">
            <TextInput v-model="formData.exchangeRate" :label="$t('travelAgency.exchangeRate')" verify-type="float"
              :maxlength="8" @blur="handleInputBlur('exchangeRate')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
          }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
          }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  row: {
    type: Object,
    default: () => { }
  },
  tripDays: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['add', 'update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
  props.type === 'add'
    ? g_t('travelAgency.addCostItem')
    : g_t('travelAgency.editCostItem')
)

const refDialogForm = ref(null)
const formData = ref({
  name: '',
  type: '',
  day: '',
  address: '',
  price: '',
  count: '',
  exchangeRate: '1'
})
const rules = {
  name: g_rules.commonInputText(g_t('travelAgency.project')),
  type: g_rules.selectRule(g_t('travelAgency.type')),
  day: g_rules.selectRule(g_t('travelAgency.days')),
  address: g_rules.selectRule(g_t('travelAgency.location')),
  price: g_rules.unitPriceNum,
  exchangeRate: g_rules.exchangeRate({
    required: true
  })
}


onMounted(() => {
  if (props.type === 'edit') {
    g_utils.assignFormData(formData.value, props.row)
    props.row.id && (formData.value.id = props.row.id)
    formData.value.countFlag = props.row.countFlag
    formData.value.order = props.row.order
    formData.value.choose = props.row.choose
  }
})

const handleClose = _ => {
  dialogVisible.value = false
}

// const handleRegionChange = data => {
//   // console.log('handleRegionChange', data)
//   formData.value.address = data.lastCode
// }

const handleInputBlur = prop => {
  // 数字化处理
  refDialogForm.value.validateField([prop], vaild => {
    if (vaild && formData.value[prop]) {
      formData.value[prop] = formData.value[prop] * 1
    }
  })
}

const handleSubmitForm = () => {
  refDialogForm.value.validate(valid => {
    if (!valid) return
    handleClose()
    emit(props.type === 'add' ? 'add' : 'update', formData.value)
  })
}
</script>

<style scoped lang="scss"></style>
